<template>
	<div class="productList-page">
    <!-- 搜索条件 -->
		<AreaWarp :padding="true">
      <SearchWarp :label="'产品'">
        <el-input v-model.trim="searchInfo.productName"  placeholder="请输入产品"></el-input>
      </SearchWarp>
      <SearchWarp :label="'状态'">
        <el-select v-model="searchInfo.status"  placeholder="请选择">
          <el-option v-for="item in statusOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
          </el-option>
        </el-select>
      </SearchWarp>
      <SearchWarp :label="'添加时间'">
          <el-date-picker v-model="searchInfo.creatTime" type="daterange" :picker-options="pickerOptions" range-separator="-" start-placeholder="开始日期"
              end-placeholder="结束日期" :editable="false"></el-date-picker>
      </SearchWarp>
      <SearchWarp :label="'修改时间'">
          <el-date-picker v-model="searchInfo.modifyTime" type="daterange" :picker-options="pickerOptions" range-separator="-" start-placeholder="开始日期"
              end-placeholder="结束日期" :editable="false"></el-date-picker>
      </SearchWarp>
      <BtnWarp>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button type="info" icon="el-icon-delete" @click="reset">重置</el-button>
      </BtnWarp>
    </AreaWarp>




    <!-- 搜索结果 -->

    <AreaWarp :padding="false">
      <AreaTitleWarp :title="''">
        <el-button type="primary" icon="el-icon-circle-plus" @click="dialogVisible=true">添加产品</el-button>
      </AreaTitleWarp>
      <el-table :data="tableInfo.list" style="width: 100%" class="pub-table" header-row-class-name="pub-table-header-row" header-cell-class-name="pub-table-header-cell"
        tooltip-effect="dark">
        <el-table-column prop="sort" label="排序" min-width="120"></el-table-column>
        <el-table-column prop="productName" label="产品名称" min-width="120"></el-table-column>
        <el-table-column prop="productRemark" label="产品介绍" min-width="120"></el-table-column>
        <el-table-column prop="amount" label="借款金额" min-width="120"></el-table-column>
        <el-table-column prop="period" label="贷款期限" min-width="120"></el-table-column>
        <el-table-column prop="status" label="状态" min-width="180" :formatter="formatter_productStatus"></el-table-column>
        <el-table-column prop="gmtCreate" label="添加时间" min-width="180" :formatter="formatter_time"></el-table-column>
        <el-table-column prop="gmtModified" label="修改时间" min-width="180" :formatter="formatter_time"></el-table-column>
        <el-table-column prop="id" label="编辑" min-width="120">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="操作" min-width="120">
          <template slot-scope="scope">
            <el-button v-if="tableInfo.list.status" type="text" size="small" @click="upDown(scope.row)">上架</el-button>
            <el-button v-else type="text" size="small" @click="upDown(scope.row)">下架</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="删除" min-width="120">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="tipVisible = true">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="total,sizes,prev, pager, next, jumper" class="pub-page"
        :current-page="searchInfo.page"
        :page-sizes="[20,50,100]"
        :page-size="searchInfo.size"
        :total="tableInfo.total"
        @current-change="search"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </AreaWarp>


      <!-- 添加产品弹窗 -->
      <el-dialog
        title="添加产品"
        :visible.sync="dialogVisible"
        width="50%"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        close="addCancel">
          <div class="dialog-body">
            <ul class="body-operation">
              <li>
                <span class="span1">logo:</span>
                <span class="span2">
                  <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                </span>
              </li>
              <li>
                <span class="span1">产品标识:</span>
                <span class="span2">
                  <el-input v-model="editInfo.channelKey" placeholder="不超过10个英文字母"></el-input>
                </span>
              </li>
              <li>
                <span class="span1">产品名称:</span>
                <span class="span2">
                  <el-input v-model="editInfo.productName" placeholder="不超过5个字符"></el-input>
                </span>
              </li>
              <li>
                <span class="span1">产品介绍:</span>
                <span class="span2">
                  <el-input v-model="editInfo.productRemark" placeholder="不超过20个字符"></el-input>
                </span>
              </li>
              <li>
                <span class="span1">排序:</span>
                <span class="span2">
                  <el-input v-model="editInfo.sort" placeholder="不超过1000的数字"></el-input>
                </span>
              </li>
              <li>
                <span class="span1">借款金额:</span>
                <span class="span2">
                  <el-input class="inputWidth" v-model.trim="editInfo.startAmount"  placeholder="开始金额"></el-input>
                  -
                  <el-input class="inputWidth" v-model.trim="editInfo.endAmount"  placeholder="结束金额"></el-input>
                </span>
              </li>
              <li>
                <span class="span1">借款期限:</span>
                <span class="span2">
                  <el-input class="inputWidth" v-model.trim="editInfo.startPeriod"  placeholder="开始期限"></el-input>
                  -
                  <el-input class="inputWidth" v-model.trim="editInfo.endPeriod"  placeholder="结束期限"></el-input>
                  <el-select v-model="editInfo.periodUnit" placeholder="请选择">
                    <el-option
                      v-for="item in UnitOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </span>
              </li>
              <li>
                <span class="span1">链接地址:</span>
                <span class="span2">
                  <el-input v-model="editInfo.productUrl" placeholder="请输入链接地址"></el-input>
                </span>
              </li>
              <li>
                <span class="span1">状态:</span>
                <span class="span2">
                  <el-select v-model="editInfo.status" placeholder="请选择">
                    <el-option
                      v-for="item in statusOptionsEdit"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                </el-select>
                </span>
              </li>
            </ul>
          </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addCancel">取 消</el-button>
          <el-button type="primary" @click="addSure">确 定</el-button>
        </span>
      </el-dialog>


      <!-- 删除提示弹窗 -->
      <el-dialog
        title="提示"
        :visible.sync="tipVisible"
        width="50%"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        close="delCancel">
        <span>确定将该产品从列表中删除？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="tipVisible = false">取 消</el-button>
          <el-button type="primary" @click="delSure">确 定</el-button>
        </span>
      </el-dialog>


      <!-- 修改产品弹窗 -->
      <productEdit :message="message" v-if="editVisible" @productEdit='productEdit'></productEdit>
	</div>
</template>
<script>
import Product from "../../../assets/js/product.js";
import productEdit from "./productEdit";
export default {
  components: {
    productEdit
  },
  data() {
    return {
      searchInfo: {
        productName: "",
        status: "",
        creatTime: "",
        modifyTime: "",
        size: 20,
        page: 1
      },
      loading: false,
      tableInfo: {
        list: [],
        total: 0
      },
      tipVisible: false,
      dialogVisible: false,
      editVisible: false,
      editInfo: {},
      statusOptionsEdit: [
        {
          value: "1",
          label: "推广中"
        },
        {
          value: "0",
          label: "已下架"
        }
      ],
      statusOptions: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "1",
          label: "推广中"
        },
        {
          value: "0",
          label: "已下架"
        }
      ],
      UnitOptions: [
        {
          value: "天",
          label: "天"
        },
        {
          value: "月",
          label: "月"
        }
      ],
      message:null
    };
  },
  methods: {
    handleSizeChange(val) {
      let that = this;
      that.searchInfo.size = val;
      that.searchInfo.page = 1;
      that.search();
    },
    //搜索
    search(currentPage) {
      let that = this;
      that.searchInfo.page = typeof currentPage == "number" ? currentPage : 1;
      let x = {
        that: that,
        productName: that.searchInfo.productName,
        status: that.searchInfo.status,
        creatTime: that.searchInfo.creatTime,
        modifyTime: that.searchInfo.modifyTime,
        size: that.searchInfo.size,
        page: that.searchInfo.page
      };

      let product = new Product(x);

      let reqData = product.getState();

      if (reqData.code) {
        that.showMsg(reqData.message, "error");
        return;
      }
      that.loading = true;
      that.ajaxJson({
        url: "/loan/productList",
        data: reqData,
        success: function(res) {
          if (res.code == "0") {
            that.tableInfo = res.data;
          }
          that.loading = false;
        }
      });
    },
    //重置
    reset() {
      let that = this;
      that.searchInfo = {
        productName: "",
        status: "",
        creatTime: "",
        modifyTime: "",
        size: 20,
        page: 1
      };
      that.search();
    },
    //添加弹窗--关闭、取消
    addCancel() {
      let that = this;
      that.editInfo = {
        imageUrl: "",
        channelKey: "",
        productName: "",
        productRemark: "",
        sort: "",
        startAmount: "",
        endAmount: "",
        startPeriod: "",
        endPeriod: "",
        periodUnit: "",
        productUrl: "",
        status: ""
      };
      that.dialogVisible = false;
    },
    //添加弹窗--确定
    addSure() {
      let that = this;
      if (!that.editInfo.imageUrl) {
        that.showMsg("请上传产品logo", "error");
        return;
      }
      if (!that.editInfo.channelKey) {
        that.showMsg("请输入产品标识", "error");
        return;
      }
      if (!that.editInfo.productName) {
        that.showMsg("请输入产品名称", "error");
        return;
      }
      if (!that.editInfo.productRemark) {
        that.showMsg("请输入产品介绍", "error");
        return;
      }
      if (!that.editInfo.sort) {
        that.showMsg("请输入排序", "error");
        return;
      }
      if (!that.editInfo.startAmount) {
        that.showMsg("请输入借贷开始金额", "error");
        return;
      }
      if (!that.editInfo.endAmount) {
        that.showMsg("请输入借贷结束金额", "error");
        return;
      }
      if (!that.editInfo.startPeriod) {
        that.showMsg("请输入接待开始期限", "error");
        return;
      }
      if (!that.editInfo.endPeriod) {
        that.showMsg("请输入借贷结束期限", "error");
        return;
      }
      if (!that.editInfo.periodUnit) {
        that.showMsg("请选择借贷期限单位", "error");
        return;
      }
      if (!that.editInfo.productUrl) {
        that.showMsg("请输入链接地址", "error");
        return;
      }
      if (!that.editInfo.status) {
        that.showMsg("请选择状态", "error");
        return;
      }
      that.ajaxJson({
        url: "/loan/saveProduct",
        data: that.editInfo,
        success: function(res) {
          if (res.code == "0") {
            that.$message({
              type: "success",
              message: "添加成功！"
            });
            that.search();
            that.addCancel();
            that.dialogVisible = false;
          }
        }
      });
    },
    //删除提醒--确定
    delSure() {
      let that = this;
    },
    //上下架
    upDown(row) {
      let that = this;
      that.ajaxJson({
        url: "/loan/upDown",
        data: {
          id: row.id,
          status: row.status
        },
        success: function(res) {
          if (res.code == "0") {
            if (row.status == "1") {
              that.$message({
                type: "success",
                message: "上架成功"
              });
              row.status = 0;
            } else if (row.status == "0") {
              that.$message({
                type: "success",
                message: "下架成功"
              });
              row.status = 1;
            }
          }
        }
      });
    },
    //编辑
    edit(row) {
      let that = this;
      console.log('1111111111')
      // let startAmount = row.amount.split('-')[0];
      // let endAmount=row.amount.split('-')[1];
      // let startPeriod=row.period.split('-')[0];
      // let  endPeriod=row.endPeriod.split('-')[1].slice(0,1);
      // let  periodUnit=row.period.slice(-1);
      that.message = {
        id:row.id,
        imageUrl:row.imageUrl,
        channelKey:row.channelKey,
        productName:row.productName,
        productRemark:row.productRemark,
        sort:row.sort,
        // startAmount:row.amount.split('-')[0],
        // endAmount:row.amount.split('-')[1],
        // startPeriod:row.period.split('-')[0],
        // endPeriod:row.endPeriod.split('-')[1].slice(0,1),
        // periodUnit:row.period.slice(-1),
        productUrl:row.productUrl,
        status:row.status,
      };
      console.log(that.message)
      that.editVisible = true;
    },
    productEdit(row) {
      let that = this;
      that.editVisible = row.editVisible;
    }
  }
};
</script>
<style lang="less">
.productList-page {
  .inputWidth {
    width: 120px;
  }
  .dialog-body {
    width: 100%;
    .body-message {
      width: 100%;
      overflow: hidden;
      li {
        width: 33.3%;
        float: left;
        line-height: 30px;
        .span1 {
          color: #999;
        }
        .span2 {
          color: #000;
        }
      }
    }
    .body-operation {
      margin-top: 20px;
      li {
        display: flex;
        line-height: 40px;
        margin-bottom: 10px;
        .span1 {
          width: 120px;
          flex: none;
          color: #999;
          text-align: right;
        }
        .span2 {
          flex: 1;
          margin-left: 20px;
          .el-input {
            width: 30% !important;
          }
          .inputWidth {
            width: 120px;
          }
          .el-select {
            .el-input {
              width: 100% !important;
            }
          }
          .el-input__inner {
            width: 100%;
            height: 36px;
            padding: 0 5px;
          }
          .el-checkbox__inner {
          }
        }
      }
    }
  }
}
</style>
